<template>
  <div class="dialog-content">
    <div class="title">{{$t('subaccount.set_settlement')}}</div>
    <p class="gray">{{$t('subaccount.settlement_info')}}</p>
    <small>{{$t('subaccount.bill_method')}}：</small>
    <div class="radio-box">
      <el-radio-group v-model="balance_type">
        <el-radio label="FPPS"></el-radio>
        <el-radio :label="$t('subaccount.iscomming')" disabled></el-radio>
      </el-radio-group>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" round @click="submit">{{$t('subaccount.btn_sure')}}</el-button>
    </div>
  </div>
</template>
<script>
import { editBalance } from '@/api';
import { mapMutations, mapGetters } from 'vuex';

export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      balance_type: '',
    };
  },
  created() {
    this.balance_type = this.data.balance_type;
  },
  computed: {
    ...mapGetters(['subId']),
  },
  methods: {
    ...mapMutations(['SET_SUB_BALANCE_TYPE']),
    submit() {
      editBalance(Object.assign({}, this.data, { balance_type: this.balance_type })).then((res) => {
        if (res.data.status === 1) {
          if (this.data.config_id === this.subId) {
            this.SET_SUB_BALANCE_TYPE(this.balance_type);
          }
          this.$notify({
            message: this.$t('api.6031'),
            type: 'success',
            duration: 2000,
            showClose: false,
          });
          this.$emit('toggleDialog', { showDialog: false, refresh: true });
        } else {
          this.$message.error(this.$t(`api.${res.data.errcode}`));
        }
      }).catch(() => {
        this.$message.error(this.$t('error.catchError'));
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-content{
  width: 330px;
  padding: 0 30px;
  .title{
    padding: 42px 0 22px;
  }
  .gray{
    color: #ccc;
    margin-bottom: 20px;
  }
  small{
    color: #70c1b3;
  }
  .radio-box{
    padding: 25px 0 20px;
  }
}
</style>
